<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>健康监测</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2627533_d7zlvvj6zdr.css">
    <style>
        body {
            background-color: #f5f5f5;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #8c8c8c;
            font-size: 0.75rem;
        }
        .nav-item.active {
            color: #0052d9;
        }
        .icon {
            font-size: 1.5rem;
            margin-bottom: 0.25rem;
        }
        .stat-card {
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        .tab-item {
            position: relative;
            padding: 12px 0;
            font-size: 14px;
            flex: 1;
            text-align: center;
            color: #666;
        }
        .tab-item.active {
            color: #0052d9;
            font-weight: 500;
        }
        .tab-item.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 3px;
            background-color: #0052d9;
            border-radius: 2px;
        }
        .progress-ring {
            position: relative;
            width: 120px;
            height: 120px;
        }
        .progress-ring-circle {
            transform: rotate(-90deg);
            transform-origin: 50% 50%;
            stroke-linecap: round;
        }
        .primary-btn {
            background-color: #0052d9;
            color: white;
            border-radius: 4px;
            padding: 8px 16px;
            font-size: 14px;
        }
        .outline-btn {
            border: 1px solid #0052d9;
            color: #0052d9;
            background-color: white;
            border-radius: 4px;
            padding: 8px 16px;
            font-size: 14px;
        }
        .badge {
            display: inline-block;
            padding: 1px 6px;
            border-radius: 10px;
            font-size: 10px;
            color: white;
        }
        .badge-good {
            background-color: #52c41a;
        }
        .badge-average {
            background-color: #faad14;
        }
        .badge-poor {
            background-color: #f5222d;
        }
        .time-btn {
            padding: 4px 12px;
            border-radius: 16px;
            font-size: 12px;
            color: #666;
            background-color: #f0f0f0;
        }
        .time-btn.active {
            color: white;
            background-color: #0052d9;
        }
        .chart-container {
            position: relative;
            height: 150px;
            width: 100%;
            overflow: hidden;
        }
        .chart-bar {
            position: absolute;
            bottom: 0;
            width: 8px;
            border-radius: 4px 4px 0 0;
            background: linear-gradient(to top, #0052d9, #3d82ff);
        }
        .chart-label {
            position: absolute;
            bottom: -20px;
            font-size: 10px;
            color: #999;
            text-align: center;
            width: 24px;
            transform: translateX(-8px);
        }
        .health-card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        .health-icon {
            width: 40px;
            height: 40px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }
    </style>
</head>
<body class="pb-16">
    <header class="bg-white p-4 flex items-center shadow-sm">
        <a href="../core/profile.html" class="mr-4">
            <i class="icon iconfont icon-arrow-left"></i>
        </a>
        <h1 class="text-lg font-medium flex-1 text-center">健康监测</h1>
        <a href="#" class="text-sm text-gray-500">
            <i class="icon iconfont icon-setting"></i>
        </a>
    </header>

    <!-- 健康状态概览 -->
    <div class="p-4 bg-gradient-to-r from-blue-500 to-blue-600 text-white">
        <div class="flex items-center justify-between">
            <div>
                <div class="text-sm opacity-80">今日健康指数</div>
                <div class="text-3xl font-bold mt-1">86<span class="text-base ml-1">分</span></div>
                <div class="text-sm mt-1 opacity-80">比昨天 <span class="text-green-300">↑2</span></div>
            </div>
            <div class="progress-ring">
                <svg width="120" height="120" viewBox="0 0 120 120">
                    <circle cx="60" cy="60" r="54" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="8" />
                    <circle cx="60" cy="60" r="54" fill="none" stroke="white" stroke-width="8" stroke-dasharray="339.292" stroke-dashoffset="47.5" class="progress-ring-circle" />
                    <text x="60" y="65" font-size="20" fill="white" text-anchor="middle" font-weight="bold">86%</text>
                </svg>
            </div>
        </div>
        <div class="grid grid-cols-3 gap-3 mt-4">
            <div class="bg-white bg-opacity-20 p-2 rounded-lg">
                <div class="text-center">
                    <div class="text-sm">步数</div>
                    <div class="text-xl font-medium mt-1">8,754</div>
                </div>
            </div>
            <div class="bg-white bg-opacity-20 p-2 rounded-lg">
                <div class="text-center">
                    <div class="text-sm">消耗</div>
                    <div class="text-xl font-medium mt-1">325<span class="text-sm">千卡</span></div>
                </div>
            </div>
            <div class="bg-white bg-opacity-20 p-2 rounded-lg">
                <div class="text-center">
                    <div class="text-sm">活动</div>
                    <div class="text-xl font-medium mt-1">45<span class="text-sm">分钟</span></div>
                </div>
            </div>
        </div>
    </div>

    <!-- 数据标签页 -->
    <div class="bg-white flex border-b border-gray-200 sticky top-0 z-10">
        <div class="tab-item active">活动数据</div>
        <div class="tab-item">睡眠质量</div>
        <div class="tab-item">健康档案</div>
    </div>

    <!-- 时间选择 -->
    <div class="bg-white p-3 border-b border-gray-100 flex justify-between">
        <div class="flex space-x-2">
            <button class="time-btn">日</button>
            <button class="time-btn active">周</button>
            <button class="time-btn">月</button>
            <button class="time-btn">年</button>
        </div>
        <div class="text-sm text-gray-500">
            2025/06/01 - 2025/06/07
        </div>
    </div>

    <!-- 活动数据可视化 -->
    <div class="p-4">
        <div class="stat-card p-4">
            <div class="flex justify-between items-center">
                <h3 class="text-base font-medium">每日步数</h3>
                <span class="badge badge-good">优</span>
            </div>
            <div class="chart-container mt-4">
                <div class="chart-bar" style="height: 60%; left: 0%;">
                    <div class="chart-label">周一</div>
                </div>
                <div class="chart-bar" style="height: 85%; left: 14.28%;">
                    <div class="chart-label">周二</div>
                </div>
                <div class="chart-bar" style="height: 70%; left: 28.57%;">
                    <div class="chart-label">周三</div>
                </div>
                <div class="chart-bar" style="height: 40%; left: 42.85%;">
                    <div class="chart-label">周四</div>
                </div>
                <div class="chart-bar" style="height: 90%; left: 57.14%;">
                    <div class="chart-label">周五</div>
                </div>
                <div class="chart-bar" style="height: 75%; left: 71.42%;">
                    <div class="chart-label">周六</div>
                </div>
                <div class="chart-bar" style="height: 65%; left: 85.7%;">
                    <div class="chart-label">周日</div>
                </div>
                <!-- 横向刻度线 -->
                <div class="absolute w-full h-px bg-gray-200" style="bottom: 25%;"></div>
                <div class="absolute w-full h-px bg-gray-200" style="bottom: 50%;"></div>
                <div class="absolute w-full h-px bg-gray-200" style="bottom: 75%;"></div>
                <!-- 刻度值 -->
                <div class="absolute text-xs text-gray-400" style="right: 0; bottom: 25%;">5,000</div>
                <div class="absolute text-xs text-gray-400" style="right: 0; bottom: 50%;">10,000</div>
                <div class="absolute text-xs text-gray-400" style="right: 0; bottom: 75%;">15,000</div>
            </div>
            <div class="flex justify-between items-center mt-8">
                <div>
                    <div class="text-xs text-gray-500">周平均</div>
                    <div class="text-lg font-medium mt-1">8,456 <span class="text-xs text-gray-500">步/天</span></div>
                </div>
                <div>
                    <div class="text-xs text-gray-500">目标</div>
                    <div class="text-lg font-medium mt-1">10,000 <span class="text-xs text-gray-500">步/天</span></div>
                </div>
                <div>
                    <div class="text-xs text-gray-500">完成率</div>
                    <div class="text-lg font-medium mt-1 text-blue-500">84.6%</div>
                </div>
            </div>
        </div>

        <div class="stat-card p-4 mt-4">
            <div class="flex justify-between items-center">
                <h3 class="text-base font-medium">活动时长</h3>
                <span class="badge badge-average">一般</span>
            </div>
            <div class="chart-container mt-4">
                <div class="chart-bar" style="height: 30%; left: 0%; background: linear-gradient(to top, #ff9800, #ffb74d);">
                    <div class="chart-label">周一</div>
                </div>
                <div class="chart-bar" style="height: 50%; left: 14.28%; background: linear-gradient(to top, #ff9800, #ffb74d);">
                    <div class="chart-label">周二</div>
                </div>
                <div class="chart-bar" style="height: 40%; left: 28.57%; background: linear-gradient(to top, #ff9800, #ffb74d);">
                    <div class="chart-label">周三</div>
                </div>
                <div class="chart-bar" style="height: 20%; left: 42.85%; background: linear-gradient(to top, #ff9800, #ffb74d);">
                    <div class="chart-label">周四</div>
                </div>
                <div class="chart-bar" style="height: 60%; left: 57.14%; background: linear-gradient(to top, #ff9800, #ffb74d);">
                    <div class="chart-label">周五</div>
                </div>
                <div class="chart-bar" style="height: 70%; left: 71.42%; background: linear-gradient(to top, #ff9800, #ffb74d);">
                    <div class="chart-label">周六</div>
                </div>
                <div class="chart-bar" style="height: 55%; left: 85.7%; background: linear-gradient(to top, #ff9800, #ffb74d);">
                    <div class="chart-label">周日</div>
                </div>
                <!-- 横向刻度线 -->
                <div class="absolute w-full h-px bg-gray-200" style="bottom: 25%;"></div>
                <div class="absolute w-full h-px bg-gray-200" style="bottom: 50%;"></div>
                <div class="absolute w-full h-px bg-gray-200" style="bottom: 75%;"></div>
                <!-- 刻度值 -->
                <div class="absolute text-xs text-gray-400" style="right: 0; bottom: 25%;">30分钟</div>
                <div class="absolute text-xs text-gray-400" style="right: 0; bottom: 50%;">60分钟</div>
                <div class="absolute text-xs text-gray-400" style="right: 0; bottom: 75%;">90分钟</div>
            </div>
            <div class="flex justify-between items-center mt-8">
                <div>
                    <div class="text-xs text-gray-500">周平均</div>
                    <div class="text-lg font-medium mt-1">46 <span class="text-xs text-gray-500">分钟/天</span></div>
                </div>
                <div>
                    <div class="text-xs text-gray-500">目标</div>
                    <div class="text-lg font-medium mt-1">60 <span class="text-xs text-gray-500">分钟/天</span></div>
                </div>
                <div>
                    <div class="text-xs text-gray-500">完成率</div>
                    <div class="text-lg font-medium mt-1 text-yellow-500">76.7%</div>
                </div>
            </div>
        </div>

        <div class="stat-card p-4 mt-4">
            <div class="flex justify-between items-center">
                <h3 class="text-base font-medium">卡路里消耗</h3>
                <span class="badge badge-good">优</span>
            </div>
            <div class="chart-container mt-4">
                <div class="chart-bar" style="height: 65%; left: 0%; background: linear-gradient(to top, #52c41a, #95de64);">
                    <div class="chart-label">周一</div>
                </div>
                <div class="chart-bar" style="height: 80%; left: 14.28%; background: linear-gradient(to top, #52c41a, #95de64);">
                    <div class="chart-label">周二</div>
                </div>
                <div class="chart-bar" style="height: 75%; left: 28.57%; background: linear-gradient(to top, #52c41a, #95de64);">
                    <div class="chart-label">周三</div>
                </div>
                <div class="chart-bar" style="height: 55%; left: 42.85%; background: linear-gradient(to top, #52c41a, #95de64);">
                    <div class="chart-label">周四</div>
                </div>
                <div class="chart-bar" style="height: 85%; left: 57.14%; background: linear-gradient(to top, #52c41a, #95de64);">
                    <div class="chart-label">周五</div>
                </div>
                <div class="chart-bar" style="height: 90%; left: 71.42%; background: linear-gradient(to top, #52c41a, #95de64);">
                    <div class="chart-label">周六</div>
                </div>
                <div class="chart-bar" style="height: 70%; left: 85.7%; background: linear-gradient(to top, #52c41a, #95de64);">
                    <div class="chart-label">周日</div>
                </div>
                <!-- 横向刻度线 -->
                <div class="absolute w-full h-px bg-gray-200" style="bottom: 25%;"></div>
                <div class="absolute w-full h-px bg-gray-200" style="bottom: 50%;"></div>
                <div class="absolute w-full h-px bg-gray-200" style="bottom: 75%;"></div>
                <!-- 刻度值 -->
                <div class="absolute text-xs text-gray-400" style="right: 0; bottom: 25%;">200千卡</div>
                <div class="absolute text-xs text-gray-400" style="right: 0; bottom: 50%;">300千卡</div>
                <div class="absolute text-xs text-gray-400" style="right: 0; bottom: 75%;">400千卡</div>
            </div>
            <div class="flex justify-between items-center mt-8">
                <div>
                    <div class="text-xs text-gray-500">周平均</div>
                    <div class="text-lg font-medium mt-1">345 <span class="text-xs text-gray-500">千卡/天</span></div>
                </div>
                <div>
                    <div class="text-xs text-gray-500">目标</div>
                    <div class="text-lg font-medium mt-1">300 <span class="text-xs text-gray-500">千卡/天</span></div>
                </div>
                <div>
                    <div class="text-xs text-gray-500">完成率</div>
                    <div class="text-lg font-medium mt-1 text-green-500">115%</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 健康建议 -->
    <div class="p-4">
        <h3 class="text-base font-medium mb-3">健康建议</h3>
        
        <div class="health-card p-4 mb-3">
            <div class="flex">
                <div class="health-icon bg-blue-100 text-blue-500 mr-3">
                    <i class="icon iconfont icon-heart"></i>
                </div>
                <div class="flex-1">
                    <div class="text-sm font-medium">增加有氧运动</div>
                    <div class="text-xs text-gray-500 mt-1">
                        建议增加快走、慢跑等有氧运动，每周至少5天，每天30分钟以上，有助于提升心肺功能和基础代谢率。
                    </div>
                </div>
            </div>
            <div class="flex justify-end mt-3">
                <button class="text-blue-500 text-sm">了解更多</button>
            </div>
        </div>
        
        <div class="health-card p-4 mb-3">
            <div class="flex">
                <div class="health-icon bg-green-100 text-green-500 mr-3">
                    <i class="icon iconfont icon-sleep"></i>
                </div>
                <div class="flex-1">
                    <div class="text-sm font-medium">改善睡眠质量</div>
                    <div class="text-xs text-gray-500 mt-1">
                        您的深度睡眠时间偏短。建议晚上10点前上床，睡前1小时避免使用电子设备，可以尝试冥想或轻度伸展运动帮助放松。
                    </div>
                </div>
            </div>
            <div class="flex justify-end mt-3">
                <button class="text-blue-500 text-sm">了解更多</button>
            </div>
        </div>
        
        <div class="health-card p-4">
            <div class="flex">
                <div class="health-icon bg-orange-100 text-orange-500 mr-3">
                    <i class="icon iconfont icon-food"></i>
                </div>
                <div class="flex-1">
                    <div class="text-sm font-medium">康养饮食建议</div>
                    <div class="text-xs text-gray-500 mt-1">
                        根据贵州当季食材，推荐增加薏米、莲子等健脾祛湿食材，搭配当地特色蔬菜和适量优质蛋白，有助于改善体质。
                    </div>
                </div>
            </div>
            <div class="flex justify-end mt-3">
                <button class="text-blue-500 text-sm">了解更多</button>
            </div>
        </div>
    </div>

    <!-- 健康设备 -->
    <div class="p-4 border-t border-gray-200">
        <div class="flex justify-between items-center mb-3">
            <h3 class="text-base font-medium">已连接设备</h3>
            <a href="#" class="text-sm text-blue-500">管理</a>
        </div>
        
        <div class="flex items-center bg-white p-3 rounded-lg mb-3">
            <img src="https://via.placeholder.com/40x40?text=手环" class="w-10 h-10 mr-3" alt="设备图标">
            <div class="flex-1">
                <div class="text-sm font-medium">康养智能手环</div>
                <div class="text-xs text-gray-500 mt-1">已连接 · 电量78%</div>
            </div>
            <div class="text-xs text-green-500 bg-green-50 px-2 py-1 rounded-full">
                数据同步中
            </div>
        </div>
        
        <div class="flex items-center bg-white p-3 rounded-lg">
            <img src="https://via.placeholder.com/40x40?text=秤" class="w-10 h-10 mr-3" alt="设备图标">
            <div class="flex-1">
                <div class="text-sm font-medium">智能体脂秤</div>
                <div class="text-xs text-gray-500 mt-1">已连接 · 最近同步: 今天 07:30</div>
            </div>
            <div class="text-xs text-gray-500">
                <i class="icon iconfont icon-arrow-right"></i>
            </div>
        </div>
    </div>

    <!-- 底部导航 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200">
        <div class="flex justify-around py-2">
            <a href="../core/home.html" class="nav-item">
                <i class="icon iconfont icon-home"></i>
                <span>首页</span>
            </a>
            <a href="../core/discover.html" class="nav-item">
                <i class="icon iconfont icon-discover"></i>
                <span>发现</span>
            </a>
            <a href="../social/community.html" class="nav-item">
                <i class="icon iconfont icon-community"></i>
                <span>社区</span>
            </a>
            <a href="../core/messages.html" class="nav-item">
                <i class="icon iconfont icon-message"></i>
                <span>消息</span>
            </a>
            <a href="../core/profile.html" class="nav-item active">
                <i class="icon iconfont icon-user"></i>
                <span>我的</span>
            </a>
        </div>
    </div>
</body>
</html> 